<template>
    <el-table :data="tableData"
              :header-cell-style="headerCellStyle"
              :row-key="rowKey"
              @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         align="center"
                         width="50"
                         v-if="showSelection"
                         :selectable="rowSelectable"/>
        <el-table-column type="index"
                         label="序号"
                         align="center"
                         width="50" />
        <!-- 自定义多级表头的表格组件 -->
        <Column v-for="col in columns"
                :key="col.id"
                :columns="col"
                :need-money-format="needMoneyFormat"
                :need-date-format="needDateFormat"
                :status-format-model="statusFormatModel" />
    </el-table>
</template>

<script>
    import Column from './Column'

    export default {
        name: "CustomComplexTable",
        components: {Column},
        props: {
            tableData: {
                type: Array,
                default: () => []
            },
            // 表头的树结构
            columns: {
                type: Array,
                default: () => []
            },
            // 需要金额千分位处理的列  [...prop]
            needMoneyFormat: {
                type: Array,
                default: () => []
            },
            // 需要状态码转名称的模板  [{prop: 'prop', model: {key: value}}]
            statusFormatModel: {
                type: Array,
                default: () => []
            },
            // 需要日期处理的列 [{prop: 'prop', format: 'YYYY-MM-DD'}]
            needDateFormat: {
                type: Array,
                default: () => []
            },
            // 表头样式
            headerCellStyle: {
                type: Object,
                default: () => {}
            },
            // 是否显示勾选
            showSelection: {
                type: Boolean,
                default: false
            },
            // row-key
            rowKey: {
                type: String,
                default: 'id'
            }
        },
        data() {
            return {

            }
        },
        methods: {
            /** 表格行选中change时间 */
            handleSelectionChange(sele) {
                this.$emit('selection-change', sele)
            },
            /** 控制表格行是否可以选中 */
            rowSelectable(row, index) {
                return index %2 === 0
            }
        }
    }
</script>

<style scoped lang="scss">

</style>
